<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3</title>
    <style>
        .main {
            width: 500px;
            height: 500px;
            margin: 100px auto ;
        }
    </style>
</head>
<body>
    <div class="main"></div>
<!--  -->
    <svg width="500" 
    
         viewBox="0 0 400 400" version="1.2"
         xmlns="http://www.w3.org/2000/svg"
        >
        <path d="m 10,10 
                 c 100, 10
                   100,190 
                   190,190 
                s  100,-190 
                   190,-190   "
             fill="none" stroke="#123546" stroke-width="40" />
        <rect x="5" y="200" width="390" height="190" stroke="#000" fill="red" stroke-width="40" /> 
        <rect x="10" y="230" width="380" height="80" style="fill:bisque;"/>   
        <circle cx="100" cy="270" r="20" style="fill:red"/> 
        <path d="m300,270 a 20 20 0 0 1 40,0"
             fill="green" stroke="" stroke-width=""  />
        <rect x="80" y="320" width="260" height="40" style="fill:rgb(0, 0, 0);"/>    
    </svg>
    <script type="module">
        import '../../assets/js/d3/d3.min.js'
        const wraper = d3.select('.main');
        const svg =   wraper.append('svg');

        function Draw(dom) {
            return function (shape, option){
                const obj = dom.append(shape);
                for (let [key,val] of Object.entries(option)){
                    obj.attr(key, val);
                }
                return obj ;
            }
        }

        svg.attr('viewBox', '0 0 400 400');
        const draw = Draw(svg);
        draw('path',{d: `m 10,10 
                 c 100, 10
                   100,190 
                   190,190 
                s  100,-190 
                   190,-190 `,
                   stroke:'#0a0f9f',
                   "stroke-dasharray":'3 ,4 ,5',
             "stroke-width":40,
                fill:'none'});

         draw('rect', {
            x:5 ,
            y:200,
            width:390,
            height:190,
            stroke: '#000',
             fill:"red",
             "stroke-width":40
         }) 
         draw('rect', {
            x:10 ,
            y:230,
            width:380,
            height:80,
             fill:"bisque",
            }
            )         
         draw('path',{d: `m300,270 a 20 20 0 0 1 40,0
                `,
                fill:"blue"
        })

        draw('rect', {
            x:80 ,
            y:320,
            width:250,
            height:40,
             fill:"black",
         })

         draw('circle',{
            cx:"100",
             cy:"270",
              r:"20",
              fill:'red' 
         })
    </script>
</body>

</html>